<!-- 运费管理 -->
<template>
  <div class="dashboard-container waybill-list customer-list-box">
    <!-- 主体 -->
    <el-main class="custom-background">
      <!-- 按钮 -->
      <el-button class="button" @click="showDialog('add')">新增模板</el-button>
      <!-- 表单 -->
      <el-table :data="tableData" max-height="600" border stripe>
        <el-table-column label="模板类型" width="160" prop="templateType" align="center">
        </el-table-column>
        <el-table-column label="运送类型" width="160" prop="transportType" align="center">
        </el-table-column>
        <el-table-column label="关联城市" width="160" prop="associatedCityList" align="center">
        </el-table-column>
        <el-table-column label="首重" width="160" prop="firstWeight" align="center">
        </el-table-column>
        <el-table-column label="续重" width="160" prop="continuousWeight" align="center">
        </el-table-column>
        <el-table-column label="轻抛系数" width="160" prop="lightThrowingCoefficient" align="center">
        </el-table-column>
        <el-table-column label="操作" align="center" width="200" fixed="right">
          <template #default="{ row }">
            <el-button type="success" size="small" @click="editList(row)">
              编辑
            </el-button>
            <el-button type="danger" size="small" @click="delList(row.id)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <!-- <el-row>
        <el-pagination
          :current-page="pageInfo.page"
          :page-sizes="[5, 10, 20]"
          background
          :page-size="pageInfo.pagesize"
          layout="total, prev, pager, next,sizes,jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        >
        </el-pagination>
      </el-row> -->
    </el-main>
    <!-- 添加/编辑角色的弹窗 -->
    <FreightDialog :row="row" ref="listRef" :toggle-dialog="isShowDialog" :text="text" @close-dialogStatus="closeDialog"
      @isMode="isMode" @queryList="queryList">
    </FreightDialog>
  </div>
</template>

<script>
import { freightManageList, freightManageDelete } from '@/api/transit'
import FreightDialog from './components/freight-add.vue'

export default {
  name: 'Fright',
  components: {
    FreightDialog
  },
  data() {
    return {
      // pageInfo: {
      //   page: 1,
      //   size: 5
      // },
      // total: 0,
      tableData: [],
      isShowDialog: false,
      text: null,
      oldData: null,
      row: null
    }
  },
  mounted() {
    this.queryList()
    // 修改分页字体样式
    // document.getElementsByClassName(
    //   'el-pagination__jump'
    // )[0].childNodes[0].nodeValue = '跳至'
    // this.queryList()
  },
  methods: {
    isMode(value) {
      this.text = value
    },
    showDialog(flag) {
      this.isShowDialog = true
      this.text = 'add'
      if (flag === 'add') {
        console.log('新增')
        this.row = {
          // 模板类型
          templateType: '',
          // 运送类型
          transportType: '',
          // 关联城市
          associatedCityList: [],
          // 首重价格
          firstWeight: '',
          // 续重价格
          continuousWeight: '',
          // 轻抛系数
          lightThrowingCoefficient: ''
        }
        console.log(this.row)
      } else {
        console.log('编辑')
      }
    },
    closeDialog(value) {
      this.isShowDialog = !value
    },

    // 获取列表
    async queryList() {
      const res = await freightManageList()
      this.tableData = res.data
      this.oldData = res.data
      this.setNewData(this.tableData)
      console.log(this.tableData)
    },

    // 转化
    setNewData(data) {
      if (Array.isArray(data)) {
        data.forEach(item => {
          switch (item.templateType) {
            case 1:
              item.templateType = '同城寄'
              break
            case 2:
              item.templateType = '省内寄'
              break
            case 3:
              item.templateType = '经济区互寄'
              break
            default:
              item.templateType = '跨省'
              break
          }
          switch (item.transportType) {
            case 1:
              item.transportType = '普快'
              break
            case 2:
              item.transportType = '特快'
              break
            default:
              break
          }
          item.associatedCityList.forEach((arr, i) => {
            switch (arr) {
              case '1':
                item.associatedCityList[i] = '全国'
                break
              case '2':
                item.associatedCityList[i] = '京津冀'
                break
              case '3':
                item.associatedCityList[i] = '江浙沪'
                break
              case '4':
                item.associatedCityList[i] = '川渝'
                break
              default:
                item.associatedCityList[i] = '黑吉辽'
                break
            }
          })
        })
      } else if (data instanceof Object) {
        switch (data.templateType) {
          case 1:
            data.templateType = '同城寄'
            break
          case 2:
            data.templateType = '省内寄'
            break
          case 3:
            data.templateType = '经济区互寄'
            break
          default:
            data.templateType = '跨省'
            break
        }
        switch (data.transportType) {
          case 1:
            data.transportType = '普快'
            break
          case 2:
            data.transportType = '特快'
            break
          default:
            break
        }
        data.associatedCityList.forEach((arr, i) => {
          switch (arr) {
            case '1':
              data.associatedCityList[i] = '全国'
              break
            case '2':
              data.associatedCityList[i] = '京津冀'
              break
            case '3':
              data.associatedCityList[i] = '江浙沪'
              break
            case '4':
              data.associatedCityList[i] = '川渝'
              break
            default:
              data.associatedCityList[i] = '黑吉辽'
              break
          }
        })
      }
      this.tableData = data
    },

    // 删除
    async delList(id) {
      await freightManageDelete(id)
      this.$confirm('你确认要删除该信息吗', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          // this.loadList()
          this.queryList()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
    },
    // 修改
    editList(row) {
      console.log(row)
      this.showDialog('update')
      this.row = row
    }
  }
}
</script>

<style lang="scss" scoped rel="stylesheet/scss">
.waybill-list {
  .el-dialog__wrapper {
    /deep/ .el-dialog__body {
      padding-left: 0px;
    }
  }
}

.custom-background {
  background-color: #fff;
  height: 100%;
  margin-left: 60px;
  margin-top: 30px;
  width: 90%;
}

.el-pagination {
  text-align: center;
  padding: 60px;
}

.button {
  margin-bottom: 20px;
  margin-top: 20px;
  background: #e15536;
  color: #fff;
  border: #e15536;
  width: 100px;
  height: 40px;
}

.call {
  text-align: center;
}
</style>
